<template>
  <div>

    <van-cell
      :value="this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].time
      +'-'+this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].time1"
      icon="shop-o"
      is-link
      @click="show = !show"
    >
      <template slot="title">
        <span class="custom-text">比赛时间</span>
      </template>
    </van-cell>

    <!-- 比赛时间弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{height: '40%' }">
      <!-- <h1>内容区域</h1> -->
      <!-- 弹出层的内容 -->
      <div>
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"

        />
      </div>

    </van-popup>
    <!-- 比赛地点 -->
    <van-cell
      title="比赛地点"
      :value="this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].dress"
      icon="location-o"
      is-link @click="mapShow = !mapShow"
    />

    <!-- 比赛地点弹出层 -->
    <van-popup v-model="mapShow" position="bottom" :style="{height: '40%' }" >
      <!-- 弹出层的内容 -->
      <!-- <h1>地图</h1> -->
      <vuemap></vuemap>

    </van-popup>

    <!-- 比赛阶段 -->
    <van-cell
     title="比赛阶段"
      :value="this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].state"
      icon="location-o"
      is-link @click="stageShow = !stageShow"

    />

    <!-- 比赛阶段弹出层 -->
    <van-popup v-model="stageShow" position="bottom" :style="{height: '40%' }" >
      <!-- 弹出层的内容 -->
      <!-- <h1>地图</h1> -->
       <van-picker :columns="stagecolumns" @change="onChange" />
    </van-popup>

    <!-- 统计模式 -->
    <van-cell title="统计模式" value="标准版" icon="location-o" is-link @click="modelShow = !modelShow"/>
    <!-- 比赛地点弹出层 -->
    <van-popup v-model="modelShow" position="bottom" :style="{height: '40%' }" >
      <!-- 弹出层的内容 -->
      <!-- <h1>地图</h1> -->
       <van-picker :columns="modelcolumns" @change="onChange" />

    </van-popup>

      <div class="van-cell-sowing" @click="prompt">
        <van-cell class="van-cell-zhibo" title="视频直播"  size="10vw"/>
      </div>

    <!-- 添加工作人员组件 -->
    <ul class="addStaff_container">
      <li v-for="i in o" :key="i">
         <addStaff></addStaff>
      </li>
    </ul>
    <!-- 添加工作人员组件按钮 -->
    <van-tabbar v-model="active">
      <van-tabbar-item @click="add">添加工作人员按钮</van-tabbar-item>
    </van-tabbar>
  </div>

</template>

<script>
import vuemap from '@/components/vue-map/vue-map.vue'
import addStaff from '@/components/staff/staff.vue'
import { mapState } from 'vuex'

export default {
  name: 'Tour-settings',
  data () {
    return {
      o: 0,
      active: 0,
      show: false,
      minHour: 10,
      maxHour: 20,
      currentDate: new Date(),
      mapShow: false,
      stageShow: false,
      modelShow: false,
      stagecolumns: ['常规赛', '季后赛'],
      modelcolumns: ['标准版', '专业版']
    }
  },
  computed: {
    ...mapState(['team1', 'CreateLeague', 'creatDataId', 'logoindex'])
  },
  components: {
    vuemap,
    addStaff
  },
  methods: {
    onChange (picker, value, index) {
      this.$toast(`当前值：${value}, 当前索引：${index}`)
    },
    prompt () {
      this.$toast('该功能还未开发')
    },
    add () {
      console.log('add')
      this.o += 1
    }
  }

}
</script>

<style scoped>
.van-cell-sowing{
  width: 100%;
  position: relative;
  text-align: center
}
.van-cell-zhibo{

  color: orangered;
  font-size: 4vw;
}
.addStaff_container{
  /* border: 2px solid red; */
  overflow: scroll;
  height: 645px;
  margin-top: 30px;
}
.amap-page-container {
  width: 100%;
}
.van-tabbar-item{
  border-radius:10px ;
  border: 2px solid red;
  margin: 15px;
  color: red;
}
</style>
